<template>
  <div class="content">
    <div class="content-block">
      <div class="content">
        <Navigation
            :navigation-list="[{id:1,value:'首页',url:'/skillIndex'},{id:3,value:'课程报名',url:''}]"></Navigation>
      </div>
      <div class="content-title">
        {{ news.trainName }}
      </div>
      <div class="body-bottom">
        <div class="body-bottom-content">
          <i class="el-icon-office-building body-bottom-icon"></i>
          <span class="bottom-content-title content-title-color">机构：</span>
          <span class="bottom-content-title">{{ news.company }}</span>
        </div>
        <div class="body-bottom-content">
          <i class="el-icon-time body-bottom-icon"></i>
          <span class="bottom-content-title content-title-color">时间：</span>
          <span class="bottom-content-title">{{ news.trainTimeText }}</span>

        </div>
        <div class="body-bottom-content">
          <i class="el-icon-location-outline body-bottom-icon"></i>
          <span class="bottom-content-title content-title-color">地址：</span>
          <span class="bottom-content-title">{{ news.transaddress }}</span>
        </div>
      </div>
      <div class="content-title2">
        <div class="content-title-top">
          <div class="btn2 content-title-division"></div>
          <div class="content-title-text">培训描述</div>
        </div>
      </div>
      <div class="content-text">
        <div v-html="news.describer"> </div>
      </div>
      <div class="content-title2">
        <div class="content-title-top">
          <div class="btn2 content-title-division"></div>
          <div class="content-title-text">相关岗位</div>
        </div>
      </div>
      <template v-if="position.length>0">
        <div class="position-block block" >
          <router-link :to="{name:'positionDetail',query:{id:item.id}}" v-for="item in position" :key="item.id" class="position-item">
            <div class="name-block">
              <div class="name">{{item.jobTitle}}</div>
              <div class="wage">{{item.minSalary}}-{{item.maxSalary}}元</div>
            </div>
            <div class="other">{{item.jobAddress}} {{item.expRequireText}}</div>

            <div class="label-block">
              <div class="label-item">{{item.minEducationText}} </div>
            </div>
          </router-link>
        </div>
      </template>
      <el-empty v-else></el-empty>
      <div class="content-text">

        <div @click="dialogVisible = true" class="btn2 btn" v-if="apply===1&&type===1">立即报名</div>
        <div class="btn2 btn" v-else>已开班</div>
        <div class="btn2 btn" v-if="apply===2&&type===1">已报名</div>

      </div>
    </div>
    <!--弹窗-->
    <el-dialog title="填写报名信息" v-if="dialogVisible" :visible.sync="dialogVisible" width="40%"
               :before-close="handleClose" :close-on-click-modal="false" :close-on-press-escape="false"
               :destroy-on-close="true">
      <applyDetails ref="applyDetails"></applyDetails>
      <span slot="footer" class="dialog-footer">
        <el-button plain type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" class="primary" @click="$refs.applyDetails.save(news.id)">立即报名</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import Navigation from "@/components/Navigation/Navigation";
import {findTrainEnrollApi, getTrainingApi} from "@/api/skill";
import {getMyPublishByPostApi} from "@/api/company";
import applyDetails from "@/pages/skill/apply-details";
export default {
  name: "JobCareers",
  components: {Navigation,applyDetails},
  data() {
    return {
      news: {
        id: 1,
        trainName:'',
        company:'',
        trainTimeText:'',
        transaddress:'',
        describer:''
      },
      dialogVisible: false,
      apply:null,
      position:{},
      type:null

    }
  },
  methods: {
    getTraining() {
      getTrainingApi({id: this.id}).then((res) => {
        this.news = res
        getMyPublishByPostApi({postId:res.postId,page: 1,limit: 8}).then((res) => {
          this.position = res ?? []
        })
      })
    },
    findTrainEnroll() {
      findTrainEnrollApi({}).then((res) => {
        this.apply = res
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.getTraining()
    this.findTrainEnroll()
  },

}
</script>

<style lang="scss" scoped>

.content {
  background-color: #F6F6F6;

  .content-block {
    width: $contentWidth;
    margin: 0 auto;
    margin-top: 16px;
    min-height: $fullMinHeight;
    background-color: #FFFFFF;

    .content-title {
      font-size: 25px;
      border-bottom: 1px solid #DBDBDB;
      margin: 20px;
      padding: 30px 0 30px 0;
      text-align: center;
    }

    .body-bottom {
      margin: 30px 0 0 20px;

      .body-bottom-content {
        height: 35px;

        .body-bottom-icon {
          color: #FD7628;
          font-size: 16px;

        }

        .bottom-content-title {
          margin-left: 10px;

        }

        .content-title-color {
          color: #adadad;
        }
      }

    }

    .content-title2 {
      .content-title-top {
        padding: 15px 0 0 20px;
        display: flex;
        background-color: #FFFFFF;
        min-height: 60px;

        .content-title-division {
          width: 8px;
          height: 20px;
          background-color: #FB3245;
          margin-top: 5px;

        }

        .content-title-text {
          color: #FD7628;
          font-size: 20px;
          font-weight: bold;
          padding-left: 10px;
          cursor: pointer;
        }
      }
    }
    .position-block{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding-left: 20px;
      padding-right: 20px;
      .position-item{
        width: calc((100% - 40px)/3);
        margin-right: 20px;
        background: #fff;
        box-shadow: 0 0 5px 0 #dfdfdf;
        border-radius: 10px;
        padding:15px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        .name-block{
          font-size: 20px;
          font-weight: bold;
          display: flex;
          flex-direction: row;
          align-items: center;
          .name{
            font-size: 18px;
            flex-grow: 1;
            width: 18px;
            height: 28px;
            overflow: hidden;
          }
          .wage{
            flex-grow: 0;
            color: $orange;
            font-size: 17px;
          }
        }
        .other{
          color: $darkGray;
          font-size: 14px;
          margin-top: 10px;
        }
        .label-block{
          margin-top: 10px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          width: 100%;
          .label-item{
            margin-right: 8px;
            margin-bottom: 8px;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 14px;
            color:$darkGray;
            background: $lightGray;
          }
        }
      }
      .position-item:nth-child(3n){
        margin-right: 0;
      }
    }
    .content-text {
      min-height: 200px;
      margin: 15px;

      .btn {
        width: 150px;
        height: 40px;
        border-radius: 5px;
        font-size: 18px;
        margin: 30px auto;
      }
    }
  }

}


</style>
